<template>
	<div class="selected">
		<label>
			<img src="https://m.youxiake.com/img/img19.750c255a.png?t=750c255a54d3191592fdf3e082729d2f" />
			精选推荐
			<img src="https://m.youxiake.com/img/img20.51bebaf2.png?t=51bebaf2463f287be032644c357055af" />
		</label>
		<ul>
			<li v-for="(it,i) in list" :key="i">
				<article>
					<h4>{{`${it.dataDetail.productCat}|${it.dataDetail.placeLabel}`}}</h4>
					<img :src="getImg(it.dataDetail.image)"/>
				</article>
				<aside>
					<h3>{{it.dataDetail.title}}</h3>
					<p>
						￥{{it.dataDetail.priceLabel}}
						<strong>起<em>{{it.dataDetail.days}}</em></strong>
					</p>
				</aside>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:'Selected',
		data(){
			return{
				list:[]
			}
		},
		created() {
			this.axios.get('https://m.youxiake.com/api/m/product/lines/recommend/user').then((res)=>{
				if (res.data.code==200) {
					this.list=res.data.data.productList
				}
			}).catch((error)=>{
				console.log(error)
			})
		},
		methods:{
			getImg(url){
				if (url!='') {
					return url.substring(0,6)==='https'?'https://images.weserv.nl?url='+url.substring(8):'https://images.weserv.nl?url='+url.substring(7)
				}
			}
		}
	}
</script>

<style scoped>
	.selected{
		padding-top: 0.5rem;
		background: #f5f5f5;
	}
	.selected label{
		font-size: 0.4rem;
		font-weight: bold;
		padding-bottom: 0.5rem;
		display: flex;
		justify-content: center;
	}
	.selected label img{
		width: 6%;
	}
	.selected ul{
		padding-bottom: 1rem;
	}
	.selected ul li{
		width: 46%;
		display: inline-block;
		padding-left: 2%;
	}
	.selected ul li article {
		width: 100%;
		height: 2.5rem;
	}
	.selected ul li article h4{
		position: relative;
		display: inline-block;
		background:rgba(0,0,0,0.6);
		z-index: 10;
		color: white;
		padding: 0.1rem;
		border-radius: 0 0.1rem 0.1rem 0;
		top: 0.1rem;
	}
	.selected ul li article img{
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		border-radius: 0.2rem;
		position: relative;
		bottom: 0.5rem;
	}
	.selected ul li article p{
		display: inline-block;
		width: 1.3rem;
		height: 0.5rem;
	}
	.selected ul li aside {
		width: 100%;
		height: 2.5rem;
	}
	.selected ul li aside h3{
		line-height: 0.5rem;
		font-size: 0.3rem;
		height: 1rem;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
	}
	.selected ul li aside p{
		font-size: 0.4rem;
		line-height: 0.9rem;
		color: orange;
		font-weight: bold;
		display: flex;
		align-items: center;
	}
	.selected ul li aside p strong{
		display: inherit;
		justify-content: space-between;
		align-items: center;
		width: 3rem;
		font-size: 0.2rem;
		color: lightslategrey;
		font-weight: normal;
	}
	.selected ul li aside p em{
		background: #eeeeee;
		line-height: 0.5rem;
		padding: 0.01rem;
	}
</style>
